<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HELLO</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link href="https://cdn.bootcss.com/layer/3.0.1/skin/default/layer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script type='text/javascript' src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#navbar" aria-expanded="false"
						aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<span class="navbar-brand">HOME</span>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li><a href="">TOP</a></li>
						<li><a href="fax.html">FAX</a></li>
						<!-- <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li> -->
					</ul>
					<!-- <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul> -->
				</div>
				<!--/.nav-collapse -->
			</div>
			<!--/.container-fluid -->
		</nav>
		<div class="panel panel-default container"  ng-app="myApp" ng-controller="customersCtrl">
			<div class="panel-body text-center">
				<h2><span class="label label-info">百度风云榜</span></h2>
					<div class="row">
				      <div class="col-xs-6 col-lg-6 col-xs-offset-3 col-lg-offset-3">
				      	<select class="form-control" ng-change="loadTopData()" ng-model="topic" 
				      		ng-options="item.Value as item.Name for item in selects">
						</select>
				      </div>
				</div>
			</div>
			<table class="table table-striped">
				<thead>
					<tr class="row">
						<th class="col-xs-3 col-lg-3"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span>排名</th>
						<th class="col-xs-6 col-lg-6"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>关键词</th>
						<th class="col-xs-3 col-lg-3"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>指数</th>
					</tr>
				</thead>
				<tbody class="grid-body">
					<tr class="row" ng-repeat="x in names"  ng-click="rowClick(x)">
						<td class="col-xs-2 col-lg-2" ng-if="x.number<4"><span class="label label-danger">{{x.number}}</span></td>
						<td class="col-xs-2 col-lg-2" ng-if="x.number>3"><span class="label label-info">{{x.number}}</span></td>
						<td class="col-xs-7 col-lg-7">{{x.name}}</td>
						<td class="col-xs-3 col-lg-3">{{x.level}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		var loadTopData2 = function(topic, scope_, http_){
			var lll = layer.msg('努力中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '300px', time:100000}) ;  
			http_.get("test?topic=" + topic)
			    .then(function (result) {
			    	scope_.names = result.data.items;
			    	layer.close(lll);
			    });
		};
		var app = angular.module('myApp', []);
		app.controller('customersCtrl', function($scope, $http) {
			$scope.selects = [{
		        "Value": "CURRENT",
		        "Name": "实时"
		    }, {
		        "Value": "SEVEN",
		        "Name": "七日",
		    }, {
		        "Value": "MOVIE",
		        "Name": "电影",
		    }];
			$scope.topic = $scope.selects[0].Value;
		    $scope.loadTopData = function(){
				loadTopData2($scope.topic, $scope, $http);
		    }
		    $scope.rowClick = function(x){
				location.href = x.href;
		    }
		    $scope.loadTopData();
		});
	</script>
</body>
</html>